﻿@using BookShop.Library.Constant
@{
    ViewBag.Title = "Thêm Tác giả";
}

<div class="portlet box blue">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-edit"></i>@ViewBag.Title
        </div>
    </div>
    <div class="portlet-body form">
        <form class="form-horizontal" id="formAddAuthor" method="POST" enctype="multipart/form-data" action="@Url.Action("Add")">
            <div class="form-body">
                <div class="alert alert-danger display-hide" style="display: none;">
                    <button class="close" data-close="alert"></button>
                    @AlertMessage.InvalidInput
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">Tên tác giả <span class="required">*</span></label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="name" id="name" value="@ViewBag.AddName"/>
                            <span class="help-block" for="name"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">Ngày sinh</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control form-control-inline date-picker" name="birthdate" id="birthdate" size="16" value="@ViewBag.AddBirthdate" data-date-format="dd/mm/yyyy"/>
                            <span class="help-block" for="birthdate"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">Tiểu sử</label>
                        <div class="col-md-7">
                            <textarea class="form-control" id="biography" name="biography" rows="10"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">File ảnh <span class="required">*</span></label>
                        <div class="col-md-4">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="input-group">
                                    <div class="form-control uneditable-input span3" data-trigger="fileinput">
                                        <span class="fileinput-filename"></span>
                                    </div>
                                    <span class="input-group-addon btn default btn-file">
                                        <span class="fileinput-new">Select file </span>
                                        <span class="fileinput-exists">Change </span>
                                        <input type="file" name="picture" id="picture">
                                    </span>
                                    <a href="#" class="input-group-addon btn red fileinput-exists" data-dismiss="fileinput">Remove </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions right">
                <button class="btn blue" type="submit">Thêm</button>
                <a href="@Url.Action("List")" class="btn default">Quay lại</a>
            </div>
        </form>
    </div>
</div>

@section css
{
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/assets/global/plugins/bootstrap-datepicker/css/datepicker3.css")"/>
    <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/assets/global/plugins/bootstrap-toastr/toastr.min.css")"/>
    <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css")" />
}

@section javascript
{
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/bootstrap-toastr/toastr.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/jquery-validation/js/jquery.validate.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js")"></script>
    @if (TempData[AlertMessage.TempDataKey] != null)
    {
        <script type="text/javascript">
            toastr['error']('@TempData[AlertMessage.TempDataKey].ToString()', 'Error');
            toastr.option = {
                "closeButton": true,
                "debug": false,
                "positionClass": "toast-top-right",
                "onclick": null,
                "showDuration": "1000",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }
        </script>
    }
    <script type="text/javascript">
        $(document).ready(function () {
            $('.date-picker').datepicker({
                rtl: Metronic.isRTL(),
                autoclose: true
            });
            validateAdd();
        });
        function validateAdd() {
            var form1 = $('#formAddAuthor');
            var error = $('.alert-danger', form1);
            form1.validate({
                errorElement: 'span',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    name: {
                        required: true
                    }
                },
                invalidHandler: function () {
                    error.show();
                },
                highlight: function (element) {
                    $(element)
                        .closest('.form-group').addClass('has-error');
                },

                unhighlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-error');
                },

                success: function (label) {
                    label
                        .closest('.form-group').removeClass('has-error');
                },
                submitHandler: function (form) {
                    error.hide();
                    form.submit();
                }
            });
        }
    </script>
}